<template>
  <div class="page">
    <div class="table-title">门店提成汇总表</div>
    <div class="radio-title">日期筛选统计方式</div>
    <div style="margin-bottom: 10px">
      <span class="radio-box"><RJRadio @change="hotelRadioChange" class="radio-item" :model='hotelRadio' :label="'1'"/>按照邀请日期统计</span>
      <span class="radio-box"><RJRadio @change="hotelRadioChange" class="radio-item" :model='hotelRadio' :label="'2'"/>转化订单离店日期统计</span>
    </div>
    <DateSelect 
      :dateList="dateList" 
      class="date-box" 
      @selectDate="selectDate($event,1)" 
      :defaultDate="defaultDate"
      :minDate="minDate"/>
    <div class="table-box">
      <div class="tr">
        <div class="td dark">入住目标中介人数</div>
        <div class="td">{{hotelTableData.checkNum||0}}</div>
        <div class="td dark">邀请点击链接人数</div>
        <div class="td">{{hotelTableData.chickLinkNum||0}}</div>
      </div>
      <div class="tr">
        <div class="td dark">成功下单人数</div>
        <div class="td">{{hotelTableData.orderMemberNum||0}}</div>
        <div class="td dark">成功转化人数</div>
        <div class="td">{{hotelTableData.changeNum||0}}</div>
      </div>
      <div class="tr">
        <div class="td dark">成功转化订单数</div>
        <div class="td">{{hotelTableData.changeOrderNum||0}}</div>
        <div class="td dark">成功转化间夜数</div>
        <div class="td">{{hotelTableData.changeNights||0}}</div>
      </div>
      <div class="tr">
        <div class="td dark">转化订单金额</div>
        <div class="td">{{hotelTableData.changeAmt||0}}</div>
        <div class="td dark">提成金额</div>
        <div class="td">{{hotelTableData.rewardAmt||0}}</div>
      </div>
      <div class="tr">
        <div class="td dark">成功邀请率</div>
        <div class="td">{{hotelTableData.invitationRate||"0%"}}</div>
        <div class="td dark">成功下单率</div>
        <div class="td">{{hotelTableData.orderRate||"0%"}}</div>
      </div>
      <div class="tr">
        <div class="td dark">成功转化率</div>
        <div class="td">{{hotelTableData.changeRare||"0%"}}</div>
        <div class="td dark"></div>
        <div class="td"></div>
      </div>
    </div>
    <div class="table-title">员工提成汇总表</div>
    <div class="radio-title">日期筛选统计方式</div>
    <div style="margin-bottom: 10px">
      <span class="radio-box"><RJRadio @change="empRadioChange" class="radio-item" :model.sync='empRadio' :label="'1'"/>按照邀请日期统计</span>
      <span class="radio-box"><RJRadio @change="empRadioChange" class="radio-item" :model.sync='empRadio' :label="'2'"/>转化订单离店日期统计</span>
    </div>
    <DateSelect 
      :dateList="dateList" 
      class="date-box" 
      @selectDate="selectDate($event,2)" 
      :defaultDate="defaultDate"
      :minDate="minDate"/>
    <table class="table" cellspacing="0" cellpadding="0">
        <tr class="th">
          <td class="td">销售员工</td>
          <td class="td">销售账号</td>
          <td class="td">邀请点击链接人数</td>
          <td class="td">成功邀请下单人数</td>
          <td class="td">成功邀请下单数</td>
          <td class="td">成功转化人数</td>
          <td class="td">成功转化订单数</td>
          <td class="td">成功转化间夜数</td>
          <td class="td">转化订单金额</td>
          <td class="td">提成金额</td>
        </tr>
        <tr v-for="(item,index) in empTableData" :key="index">
          <td class="emp-name" @click="toDetails(item.oprNo)">{{item.oprName}}</td>
          <td>{{item.oprNo}}</td>
          <td>{{item.chickLinkNum}}</td>
          <td>{{item.orderMemberNum}}</td>
          <td>{{item.orderNum}}</td>
          <td>{{item.changeNum}}</td>
          <td>{{item.changeOrderNum}}</td>
          <td>{{item.changeNights}}</td>
          <td>{{item.changeAmt}}</td>
          <td>{{item.rewardAmt}}</td>
        </tr>
      </table>
  </div>
</template>

<script>
import DateSelect from '@/components/dateRange.vue'
import RJRadio from '@/components/RJRadio.vue'
import {formart} from '@/utils/dateUtils.js'
// import { getHotelRewardInfoAPI,getOprRewardInfoAPI } from '@/api/common';
export default{
  data() {
    return {
      minDate: '',
      defaultDate: [],
      date1: [],
      date2: [],
      dateList: [
        {name: '自定义',value: null}
      ],
      hotelRadio: 1,
      empRadio: 1,
      hotelTableData: {},
      empTableData: [],
      dateType: 0   //员工表日期下拉框选中项下标,传递给详情页用
    }
  },
  components: {
    DateSelect,
    RJRadio
  },
  created() {
    let now = new Date()
    let year = now.getFullYear()
    this.minDate = year+"-01-01"
    let date = formart(new Date(now.setDate(now.getDate() - 1)));
    let month = now.getMonth()
    this.defaultDate = [date,date];
    this.date1 = [date,date];
    this.date2 = [date,date];
    let texts = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',]
    let dateList = this.dateList
    dateList.push({name: "年至今", value: [year+"-01-01", date]})
    for(let i=0;i<=month;i++){
      let month = i*1+1
      month = month<10?"0"+month:month
      dateList.push({name: texts[i], value: [year+"-"+month+"-01", formart(this.getMonthEndDay(year+"-"+month))]})
    }
    this.getHotelTableData()
    this.getEmpTableData()
  },
  methods: {
    async getHotelTableData() {
      this.hotelTableData = {}
      // let params = {
      //   dateType: this.hotelRadio,
      //   startDate: this.date1[0],
      //   endDate: this.date1[1]
      // }
      //let res = await getHotelRewardInfoAPI(params)
      // if(res) {
      //   this.hotelTableData = res.data
      // }
      this.hotelTableData = {
        "checkNum": 5,
        "chickLinkNum": 2,
        "orderMemberNum": 2,
        "changeNum": 2,
        "changeOrderNum": 2,
        "changeNights": 5,
        "changeAmt": 273.00,
        "rewardAmt": 18.00,
        "invitationRate": "40.00%",
        "orderRate": "100.00%",
        "changeRare": "100.00%"
      }
    },
    async getEmpTableData() {
      this.empTableData = []
      // let params = {
      //   dateType: this.empRadio,
      //   startDate: this.date1[0],
      //   endDate: this.date1[1]
      // }
      // let res = await getOprRewardInfoAPI(params)
      // if(res) {
      //   this.empTableData = res.data
      // }
      this.empTableData = [{
            "oprName": "张大大",
            "oprNo": "345345",
            "chickLinkNum": 1,
            "orderMemberNum": 1,
            "orderNum": 1,
            "changeNum": 1,
            "changeOrderNum": 1,
            "changeNights": 2,
            "changeAmt": 153.00,
            "rewardAmt": 8.00
        },
        {
            "oprName": "李丽丽",
            "oprNo": "12312312",
            "chickLinkNum": 1,
            "orderMemberNum": 1,
            "orderNum": 1,
            "changeNum": 1,
            "changeOrderNum": 1,
            "changeNights": 3,
            "changeAmt": 120.00,
            "rewardAmt": 10.00
        }]
    },
    hotelRadioChange(result) {
      this.hotelRadio = result
      this.getHotelTableData()
    },
    empRadioChange(result) {
      this.empRadio = result
      this.getEmpTableData()
    },
    toDetails(oprNo) {
      this.$router.push({path:'/empDetailsList',query:{
        oprNo:oprNo,
        date1: this.date2[0],
        date2:this.date2[1],
        dateType: this.dateType
      }});
    },
    selectDate(result,num) {
      if(num == 1) {
        //酒店
        this.date1 = result.date
        this.getHotelTableData()
      }else {
        //员工
        this.date2 = result.date
        this.dateType = result.index
        this.getEmpTableData()
      }
    },
    getMonthEndDay(month) {   //获取当月最后一天
      return new Date(month.substr(0, 4), month.substr(5, 2), 0);
    }
  }
}
</script>

<style lang="less" scoped>
.page{
  padding: 15px 18px;
  min-width: 375px;
  box-sizing: border-box;
  .table-title{
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #1B1F26;
      line-height: 19px;
      margin-bottom: 11px;
  }
  .radio-title{
    margin-left: 8px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #1B1F26;
    line-height: 19px;
    margin-bottom: 6px;
  }
  .radio-box{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #1B1F26;
    .radio-item{
      margin:0 4px 0 8px;
    }
  }
  .date-box{
    margin-bottom: 10px;
  }
  .table-box{
    border: 1px solid #E8E8E8;
    min-width: 90%;
    margin-bottom: 20px;
    .tr{
      border-bottom: 1px solid #E8E8E8;
      height: 34px;
      display: flex;
      &:last-child{
        border-bottom: none;
      }
      .td{
        flex: 1;
        border-right: 1px solid #E8E8E8;
        height: 100%;
        font-size: 12px;
        font-family: ArialMT;
        color: #333333;
        text-align: center;
        line-height: 34px;
        &:last-child{
          border-right: none;
        }
      }
      .dark{
        flex: 2;
        min-width: 110px;
        background: #F0F4F5;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: #666666;
      }
    }
  }
  .table{
    width: 100%;
    margin-bottom: 10px;
    border:solid #E6E5E8; 
    border-width:1px;
    tr{
      width: 100%;
      height: 40px;
      display: flex;
    }
    td{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #333333;
      text-align: center;
      border:solid #E8E8E8; 
      border-width: 0 1px 1px 0;
      box-sizing: border-box;
      padding: 0 3px;
      word-break: break-all;
      &:last-child{
        border-right: none;
      }
    }
    .emp-name{
      color: #0F9AF2;
    }
    .th{
      background-color: #F0F4F5;
      height: max-content;
      position: sticky;
      top: 0;
      display: flex;
      .td{
        flex: 1;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: #666666;
        line-height: 16px;
      }
    }
  }
}
</style>